import React, { lazy } from "react";

import Home from "@/views/Home";
// import About from "@/views/About";
// import User from "@/views/User";
import { Navigate } from "react-router-dom";

const About = lazy(() => import("@/views/About"));
const User = lazy(() => import("@/views/User"));
const Page1 = lazy(() => import("@/views/Page1"));
const Page2 = lazy(() => import("@/views/Page2"));
const Page301 = lazy(() => import("@/views/Page301"));
const Page401 = lazy(() => import("@/views/Page401"));
const Login = lazy(() => import("@/views/login/index"));

// 报错
// A component suspended while responding to synchronous input.
// This will cause the UI to be replaced with a loading indicator.
// To fix, updates that suspend should be wrapped with startTransition.
// 懒加载模式，外面需要套一层并添加loading组件
const withLoadingComponent = (Comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading...</div>}>{Comp}</React.Suspense>
);

// 对象形式路由的写法
const routes = [
  // 嵌套路由 开始----------------------------
  {
    path: "/",
    element: <Navigate to="/page1" />, // 用户访问'/'重定向到'/home'
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: withLoadingComponent(<Page1 />),
      },
      {
        path: "/page2",
        element: withLoadingComponent(<Page2 />),
      },
      {
        path: "/page3/page301",
        element: withLoadingComponent(<Page301 />),
      },
      {
        path: "/page4/page401",
        element: withLoadingComponent(<Page401 />),
      },
    ],
  },
  // 嵌套路由 结束 ----------------------------

  {
    path: "/login",
    element: withLoadingComponent(<Login />), // 其他没有的页面 重定向到'/home'
  },
  // 访问其他路径跳转至page1 可自制404
  {
    path: "*",
    element: <Navigate to="/page1" />, // 其他没有的页面 重定向到'/home'
  },
  // {
  //     path: "/about",
  //     element: withLoadingComponent(<About />),
  // },
  // {
  //     path: "/user",
  //     element: withLoadingComponent(<User />),
  // },
];
export default routes;
